<template>
  <div class="container">
    <div>
      <el-card>
        <el-form :inline="true" label-width="80px">
          <el-form-item label="关键字">
            <el-input v-model="form.keyword"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.state" placeholder="请选择活动区域">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" @click="handleDetail">清除</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="getArticlesList">搜索</el-button>
          </el-form-item>
          <el-form-item class="addbtn">
            <el-button type="success" size="mini" icon="el-icon-edit" @click="dialogAdd = true">新增技巧</el-button>
          </el-form-item>
          <el-alert :title="`共${page.total}条数据`" show-icon  :closable="false" type="info"> </el-alert>
        </el-form>
        <div>
          <el-table :data="ArticlesList">
            <el-table-column v-for="(item, index) in AriticlesData" :key="index" :label="item.label" :prop="item.props" width=""> </el-table-column>
            <el-table-column v-model="AriticlesData" label="状态" prop="state" :formatter="formatterState"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="see(scope.row)">预览</el-button>
                <el-button type="text" size="small" @click="states(scope)">{{ scope.row.state === 0 ? '启用' : '禁用' }}</el-button>
                <el-button type="text" size="small" @click="alter(scope)" :disabled="scope.row.state == 1">修改</el-button>
                <el-button type="text" size="small" @click="delet(scope)" :disabled="scope.row.state == 1">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
                    <div class="block">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="page.pagesize"
              :total="page.total"
              layout=" prev, pager, next, sizes, jumper"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
      <!-- 新增/修改弹层 -->
            <articleadd :item="obj" :dialogAdd.sync='dialogAdd'></articleadd>
      <!-- 预览文章弹层 -->
      <articlespreview :item="obj" :dialogSimple.sync="dialogSimple"></articlespreview>
    </div>
  </div>
</template>

<script>
// import E from 'wangeditor'
import { list, remove, add, changeState } from '@/api/hmmm/articles'
import articlespreview from '../components/articles-preview.vue'
import articleadd from '../components/articles-add.vue'
export default {
  components: {
    articlespreview,
    articleadd
  },
  created () {
    this.getArticlesList()
  },
  data () {
    return {
      obj: {},
      // components: { E },
      formLabelWidth: '120px',
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogSimple: false,
      dialogAdd: false,
      input: '',
      form: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
        // title: '',
        // articleBody: '',
        // videoURL: '',
        // counts: '',
        // pages: '',
        // items: '',
        // id: '',
        // reads: '',
        // creator: ''
      },
      options: [{ value: 1, label: '启用' },
        { value: 0, label: '禁用' }

      ],
      ArticlesList: [],
      // getData: {
      //   page: '',
      //   pagesize: '',
      //   keyword: '',
      //   state: ''
      // },
      page: {
        pagesize: 10,
        page: 1,
        total: 0
      },
      currentPage: 1,
      AriticlesData: [
        { label: '序号', props: 'id' },
        { label: '文章标题', props: 'title' },
        { label: '阅读数', props: 'visits' },
        { label: '录入人', props: 'username' },
        { label: '录入时间', props: 'createTime' }
      ]
    }
  },
  methods: {
    // 文章详情

    // 富文本编辑框
    // editors () {
    //   const editor = new E(this.$refs.editorElem)
    //   // this.editor.create()
    //   editor.config.menus = ['bold', 'italic', 'underline', 'strikeThrough', 'indent', 'lineHeight', 'foreColor', 'backColor', 'link', 'list', 'todo', 'justify', 'quote', 'image']
    //   editor.config.onchange = (newHtml) => {
    //     this.articleBody = newHtml
    //   }
    //   editor.create()
    // },
    async getArticlesList () {
      console.log(this.form)
      const res = await list({ ...this.form, ...this.page })
      console.log(res)
      this.ArticlesList = res.data.items
      console.log(this.ArticlesList)
      this.page.total = res.data.counts
    },
    // 清除选择项
    handleDetail () {
      console.log('清除按钮')
      this.form = {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: ''
        // title: '',
        // articleBody: '',
        // videoURL: '',
        // counts: '',
        // pages: '',
        // items: '',
        // id: '',
        // reads: '',
        // creator: ''
      }
    },
    // 搜索项
    handleSearch () {
      // console.log('搜索按钮')
    },
    formatterState (row) {
      return row.state === 0 ? '已禁用' : '已启用'
    },
    // 修改按钮
    alter (scope) {
      console.log(scope)
    },
    // 文章添加
    async articlesAdd (val) {
      const data = await add(val)
      console.log(data)
    },
    // 判断状态(启用/禁用)
    async states (scope) {
      console.log(scope.row.state)

      if (scope.row.state === 0) {
        scope.row.state = 1
      } else {
        scope.row.state = 0
      }
      const res = await changeState({ id: scope.row.id, state: scope.row.state })
      console.log(res)
    },
    // 文章删除
    async removeArticles (id) {
      const res = await remove({ id })
      console.log(res)
    },
    async delet (scope) {
      console.log(scope.row.id)
      await this.$confirm('此操作将永久删除该文章, 是否继续?')
      this.removeArticles(scope.row.id)
      this.getArticlesList()
    },
    see (row) {
      console.log(row)
      this.dialogSimple = true
      this.obj = row
    },
    handleCurrentChange (newpage) {
      // console.log(`当前页: ${val}`)
      // this.currentPage = newpage
      this.page.page = newpage
      console.log(newpage)
      this.getArticlesList()
    },
    handleSizeChange (val) {
      this.page.pagesize = val
      this.getArticlesList()
    }
  },
  mounted () {
    // this.editors()
  }
}
</script>

<style  lang="scss" scoped>
 ::v-deep .el-card__body {
    padding-bottom: 60px;
  }
::v-deep .el-input__inner {
  width: 200px;
}
.addbtn {
  position: absolute;
  right: 50px;
}
.block {
  margin-top: 10px;
  position: absolute;
  right: 100px;
   ::v-deep .el-input__inner {
    width: 100px;
  }
}
</style>
